<template>

    <div class="addMerchantBox" v-loading="loading">
    <el-form ref="form" :model="data" :rules="rules">
        <span>申请 {{merchant.company}}厂家代理商</span>

        <el-form-item label="代理商级别" prop="level" style="margin-top:24px">
            <el-select v-model="data.level" placeholder="请选择" style="width:300px">
                <el-option
                    v-for="item in levelList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                >
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="省">
            <el-input readonly="readonly" v-model="infoList.province_name" placeholder="不修改密码则不填写" style="width:300px"></el-input>
        </el-form-item>

        <el-form-item label="市">
            <el-input readonly="readonly" v-model="infoList.city_name" placeholder="请填写联系人" style="width:300px"></el-input>
        </el-form-item>

        <el-form-item label="区">
            <el-input readonly="readonly" v-model="infoList.district_name" placeholder="请填写手机号" style="width:300px"></el-input>
        </el-form-item>

        <el-form-item label="详细地址">
            <el-input readonly="readonly" v-model="infoList.address" placeholder="请填写企业名称" style="width:300px"></el-input>
        </el-form-item>

        <el-form-item label="联系人姓名">
            <el-input readonly="readonly" v-model="infoList.real_name" placeholder="请填写企业名称" style="width:300px"></el-input>
        </el-form-item>

        <el-form-item label="联系手机">
            <el-input readonly="readonly" v-model="infoList.mobile" placeholder="请填写主营类型" style="width:300px"></el-input>
        </el-form-item>

        <el-form-item label="主营产品">
            <el-input
                readonly="readonly"
                style="width:400px"
                type="textarea"
                :autosize="{ minRows: 10}"
                placeholder="请输入内容"
                v-model="infoList.scope">
            </el-input>
        </el-form-item>
    </el-form>

    <div class="submitBtnBox">
      <el-button class="submitBtn" @click="submitClick" type="primary">保存</el-button>
    </div>
  </div>

</template>

<script>

    export default {
        name: 'agentApply',
        data(){
            return{
                data:{
                    token: localStorage.getItem('user_token'),
                    agent_id: localStorage.getItem('user_id'),
                    level: '',
                    mill_id: ''
                },
                merchant:{
                    id: '',
                    company: ''
                },
                levelList:[
                    {id:1,label:'省级代理'},
                    {id:2,label:'市级代理'},
                    {id:3,label:'区、县级代理'},
                    {id:4,label:'镇级代理'},
                    {id:5,label:'村级代理'},
                ],
                loading: false,
                rules:{
                    level: [{required: true, message: "请选择代理商级别", trigger: "blur" }]
                },
                infoList:{},
            }
        },

        methods:{

            defaultData(){
                this.merchant = this.$route.query
                this.data.mill_id = this.$route.query.id
            },
            
            getUserInfo(){
                this.loading = true;
                this.$http.get("/agent/info", {
                    params: {
                        token: localStorage.getItem("user_token"),
                        id: localStorage.getItem("user_id")
                    }
                }).then(response => {
                    if (response.data.status == "success") {
                        this.infoList = response.data.data
                    }
                })
                this.loading = false;
            },

            submitClick(){
                this.$refs.form.validate(valid => {
                if (!valid) {
                    return false;
                }else{
                    this.loading = true;
                    this.$http.post("/agent/mill/apply", this.data).then(response => {
                        console.log(response)
                    if (response.data.status == 'success') {
                        this.$message({
                            message: '保存成功',
                            type: 'success',
                            duration: 6000
                        });
                        this.$router.push({name: 'agentApplyList'})
                    }else{
                        this.$message({
                            showClose: true,
                            message: '保存失败，请稍候再试',
                            type: 'error'
                        });
                        
                    }
                    this.loading = false
                    }).catch(error => {
                        console.log(error);
                        
                            this.$message({
                                showClose: true,
                                message: '保存失败，请稍候再试',
                                type: 'error'
                            });
                            this.loading = false
                        });
                    }
                })
            }
        },

        mounted() {
            this.defaultData();
            this.getUserInfo();
        }
    }
</script>

<style scoped lang="scss">
@import "./agent.scss";
</style>